color paletteを作るCSS

CSSの場合

code:css

background: linear-gradient(to right,

hsl(0, 100%, 60%) 0%,

hsl(18, 100%, 60%) 5%,

hsl(36, 100%, 60%) 10%,

hsl(54, 100%, 60%) 15%,

hsl(72, 100%, 60%) 20%,

hsl(90, 100%, 60%) 25%,

hsl(108, 100%, 60%) 30%,

hsl(126, 100%, 60%) 35%,

hsl(144, 100%, 60%) 40%,

hsl(162, 100%, 60%) 45%,

hsl(180, 100%, 60%) 50%,

hsl(198, 100%, 60%) 55%,

hsl(216, 100%, 60%) 60%,

hsl(234, 100%, 60%) 65%,

hsl(252, 100%, 60%) 70%,

hsl(270, 100%, 60%) 75%,

hsl(288, 100%, 60%) 80%,

hsl(306, 100%, 60%) 85%,

hsl(324, 100%, 60%) 90%,

hsl(342, 100%, 60%) 95%,

hsl(360, 100%, 60%) 100%);

}

https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/takker/color_palette%E3%82%92%E4%BD%9C%E3%82%8BCSS/palette.svg

色の変化が微妙だな……

CSS版のほうがなめらかだった

code:palette.svg

<defs>

<linearGradient id="gradient1">

<stop offset="0%" stop-color="hsl(0, 100%, 60%)" />

<stop offset="5%" stop-color="hsl(18, 100%, 60%)" />

<stop offset="10%" stop-color="hsl(36, 100%, 60%)" />

<stop offset="15%" stop-color="hsl(54, 100%, 60%)" />

<stop offset="20%" stop-color="hsl(72, 100%, 60%)" />

<stop offset="25%" stop-color="hsl(90, 100%, 60%)" />

<stop offset="30%" stop-color="hsl(108, 100%, 60%)" />

<stop offset="35%" stop-color="hsl(126, 100%, 60%)" />

<stop offset="40%" stop-color="hsl(144, 100%, 60%)" />

<stop offset="45%" stop-color="hsl(162, 100%, 60%)" />

<stop offset="50%" stop-color="hsl(180, 100%, 60%)" />

<stop offset="55%" stop-color="hsl(198, 100%, 60%)" />

<stop offset="60%" stop-color="hsl(216, 100%, 60%)" />

<stop offset="65%" stop-color="hsl(234, 100%, 60%)" />

<stop offset="70%" stop-color="hsl(252, 100%, 60%)" />

<stop offset="75%" stop-color="hsl(270, 100%, 60%)" />

<stop offset="80%" stop-color="hsl(288, 100%, 60%)" />

<stop offset="85%" stop-color="hsl(306, 100%, 60%)" />

<stop offset="90%" stop-color="hsl(324, 100%, 60%)" />

<stop offset="95%" stop-color="hsl(342, 100%, 60%)" />

<stop offset="10%" stop-color="hsl(360, 100%, 60%)" />

</linearGradient>

</defs>

<line stroke-width="16" stroke-linecap="round" stroke="url(#gradient1)" x1="10" y1="10" y2="10.1" x2="90"/>

</svg>